<template>
  <div class="main-box">
    <div class="table-box">
      <ProTable
        ref="proTable"
        title="库存列表"
        highlight-current-row
        :columns="columns"
        :request-api="getInventory"
        :init-param="Object.assign(initParam)"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <el-button type="primary" :icon="Download" plain @click="downloadFile">导出库存数据</el-button>
        </template>
        <!-- 表格操作 -->
        <template #operation="scope">
          <el-button type="primary" link :icon="View" @click="openDetailDrawer(scope.row)">查看</el-button>
          <el-button type="primary" link :icon="Edit" @click="openModifyDialog(scope.row)">修改</el-button>
          <el-button type="primary" link :icon="Box" @click="openSupplyDialog(scope.row)">补货</el-button>
        </template>
      </ProTable>
      <ModifyDialog ref="modifyRef" />
      <DetailDrawer ref="detailRef" />
      <SupplyDialog ref="supplyRef" />
      <ImportExcel ref="dialogRef" />
    </div>
  </div>
</template>
<script setup lang="tsx" name="useSelectFilter">
import { ref, reactive, onMounted } from "vue";
import { ElMessageBox } from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
import ImportExcel from "@/components/ImportExcel/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { Download, View, Edit, Box } from "@element-plus/icons-vue";
import { getInventory, exportInventoryInfo, modifyHold, supplyHold } from "@/api/modules/warehouse";
import { Warehouse } from "@/api/interface";
import { useUserStore } from "@/stores/modules/user";
import { useDownload } from "@/hooks/useDownload";
import DetailDrawer from "@/views/warehouse/inventory/components/DetailDrawer.vue";
import ModifyDialog from "@/views/warehouse/inventory/components/ModifyDialog.vue";
import SupplyDialog from "@/views/warehouse/inventory/components/SupplyDialog.vue";

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();

// 表格配置项
const columns: ColumnProps[] = [
  { prop: "inventoryId", label: "单号", width: 90, sortable: true, search: { el: "input" } },
  { prop: "goodsName", label: "商品名称", width: 150 },
  { prop: "measureUnit", label: "单位", width: 80 },
  { prop: "totalHold", label: "总库存量", width: 90 },
  {
    prop: "availableHold",
    label: "可分配量",
    render: scope => {
      if (scope.row.totalHold) {
        return (
          <div>
            <el-progress
              text-inside="true"
              stroke-width="15"
              percentage={Math.round((scope.row.availableHold / scope.row.totalHold) * 100)}
            ></el-progress>
          </div>
        );
      } else {
        return (
          <div>
            <el-progress text-inside="true" stroke-width="15" color="#00A0E9" percentage={0}></el-progress>
          </div>
        );
      }
    },
    width: 150
  },

  {
    prop: "allocatedHold",
    label: "已分配量",
    render: scope => {
      if (scope.row.totalHold) {
        return (
          <div>
            <el-progress
              text-inside="true"
              stroke-width="15"
              color="#00A0E9"
              percentage={Math.round((scope.row.allocatedHold / scope.row.totalHold) * 100)}
            ></el-progress>
          </div>
        );
      } else {
        return (
          <div>
            <el-progress text-inside="true" stroke-width="15" color="#00A0E9" percentage={0}></el-progress>
          </div>
        );
      }
    },
    width: 150
  },
  {
    prop: "returnHold",
    label: "退回数量",
    render: scope => {
      if (scope.row.totalHold) {
        return (
          <div>
            <el-progress
              text-inside="true"
              stroke-width="15"
              color="#f56c6c"
              percentage={Math.round((scope.row.returnHold / scope.row.totalHold) * 100)}
            ></el-progress>
          </div>
        );
      } else {
        return (
          <div>
            <el-progress text-inside="true" stroke-width="15" color="#00A0E9" percentage={0}></el-progress>
          </div>
        );
      }
    },
    width: 150
  },
  { prop: "maxHold", label: "最大值", width: 90 },
  {
    prop: "warnHold",
    label: "预警值",
    render: scope => {
      return <el-text type="error">{scope.row.warnHold}</el-text>;
    },
    width: 90
  },
  { prop: "updateTime", label: "库存更新时间", sortable: true, width: 200 },
  { prop: "operation", label: "操作", fixed: "right", width: 220 }
];

// 初始化方法，挂载之后执行的东西填到里面
onMounted(() => {});

// 分站id做为初值
const userStore = useUserStore();
const initParam = reactive({ warehouseId: userStore.userInfo.departmentId });

// 导出出入库单列表
const downloadFile = async () => {
  ElMessageBox.confirm("确认导出数据?", "温馨提示", { type: "warning" }).then(() =>
    useDownload(exportInventoryInfo, "入库单列表", proTable.value?.searchParam)
  );
};

const detailRef = ref<InstanceType<typeof DetailDrawer> | null>(null);
const openDetailDrawer = (row: Partial<Warehouse.InventoryData> = {}) => {
  const params = {
    title: "库存详情",
    isView: true,
    row: { ...row },
    api: getInventory,
    getTableList: proTable.value?.getTableList
  };
  detailRef.value?.acceptParams(params);
};

const modifyRef = ref<InstanceType<typeof ModifyDialog> | null>(null);
const openModifyDialog = (row: Partial<Warehouse.InventoryData> = {}) => {
  const params = {
    title: "修改库存信息",
    isView: true,
    row: { ...row },
    api: modifyHold,
    getTableList: proTable.value?.getTableList
  };
  modifyRef.value?.openDialog(params);
};

const supplyRef = ref<InstanceType<typeof SupplyDialog> | null>(null);
const openSupplyDialog = (row: Partial<Warehouse.InventoryData> = {}) => {
  const params = {
    title: "补货",
    isView: true,
    row: { ...row },
    api: supplyHold,
    getTableList: proTable.value?.getTableList
  };
  supplyRef.value?.openDialog(params);
};
</script>
